ساخت منوی کشویی توسط تگ ul و li و بوت استرپ

مشخصات سوال کننده :

کاربر : pedram_khan امتیاز کاربر : 277 رتبه کاربر : 6

دسته بندی : Html Css بوت استرپ

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 4260

هوش مصنوعی

پاسخ هوش مصنوعی

برای ساخت منوی کشویی با استفاده از تگ های ul و li و بوت استرپ، می توانید از کلاس های مربوط به بوت استرپ استفاده کنید. در زیر یک مثال از یک منوی کشویی آورده شده است:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

برای استفاده از این کد، اطمینان حاصل کنید که فایل CSS و JS بوت استرپ را در صفحه خود لینک کرده اید تا منو به درستی کار کند.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 11:55 1399/06/02

برای ایجاد منو به صورت کشویی یا آبشاری در Html و Css شما میتونید با استفاده از کدهای Html و Css و تگ ul و li به راحتی این کار را انجام بدید. در ادامه یک مثال براتون از ایجاد منوی کشویی با استفاده از html و css میارم. کافیه دقیقا همین کدها رو کپی و پیست کنید در یک فایل html

ساخت منوی کشویی با استفاده از Html و Css

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container ul {
            list-style: none;
        }


            #container ul li {
                background-color: brown;
                width: 150px;
                border: 1px solid white;
                height: 50px;
                line-height: 50px;
                text-align: center;
                float: left;
                color: white;
                font-size: 18px;
                position: relative;
            }


                #container ul li:hover {
                    background-color: green;
                }

            #container ul ul {
                display: none;
            }


            #container ul li:hover > ul {
                display: block;
            }

            #container ul ul ul {
                margin-left: 150px;
                top: 0;
                position: absolute;
            }
    </style>
    <meta charset="utf-8" />
</head>
<body>
    <div id="container">
        <ul>
            <li>menu 1</li>
            <li>menu 2</li>
            <li>
                menu 3

                <ul>
                    <li>menu 3-1</li>
                    <li>
                        menu 3-2
                        <ul>
                            <li>menu 3-2-1</li>
                            <li>menu 3-2-2</li>
                            <li>menu 3-2-3</li>
                        </ul>
                    </li>
                    <li>menu 3-3</li>
                </ul>
            </li>
            <li>menu 4</li>
        </ul>
    </div>
</body>
</html>

حالا اگر فایل رو اجرا کنید باید منویی مشابه با تصویر زیر رو ببینید :

ساخت منوی کشویی در html

ساخت منوی کشویی با استفاده از بوت استرپ

اگر هم که بخواید با استفاده از بوت استرپ منوی کشویی ایجاد کنید خب توی خود سایت بوت استرپ نمونه کد برای این کار قرار داده شده. برای این کار هم میتونید کدهای زیر رو دقیقا کپی و پیست کنید.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>

در ادامه باید منویی مثل تصویر زیر داشته باشید

ساخت منوی کشویی با استفاده از بوت استرپ

به این پاسخ امتیاز بدهید 0

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

ساخت منوی کشویی توسط تگ ul و li و بوت استرپ

پاسخ هوش مصنوعی

ساخت منوی کشویی با استفاده از Html و Css

ساخت منوی کشویی با استفاده از بوت استرپ

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین